<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>Hello MUI</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">

		<link rel="stylesheet" href="./css/mui.min.css">
		<link rel="stylesheet" href="./css/mui_new.css">
		<style>
			html,body {background-color: #efeff4;}
			.mui-views,.mui-view,.mui-pages,.mui-page,.mui-page-content {position: absolute;left: 0;right: 0;top: 0;bottom: 0;width: 100%;height: 100%;}
			.mui-pages {top: 46px;height: auto;}
			.mui-page.mui-transitioning {-webkit-transition: -webkit-transform 300ms ease;transition: transform 300ms ease;}
			.mui-page-left {-webkit-transform: translate3d(0, 0, 0);transform: translate3d(0, 0, 0);}
			.mui-ios .mui-page-left {-webkit-transform: translate3d(-20%, 0, 0);transform: translate3d(-20%, 0, 0);}
			.mui-navbar {position: fixed;right: 0;left: 0;z-index: 10;height: 44px;}
			.mui-navbar .mui-bar {position: absolute;background: transparent;text-align: center;}
			.mui-android .mui-navbar-inner.mui-navbar-left {opacity: 0;}
			.mui-ios .mui-navbar-left .mui-left,.mui-ios .mui-navbar-left .mui-center,.mui-ios .mui-navbar-left .mui-right {opacity: 0;}
			.mui-navbar .mui-btn-nav {-webkit-transition: none;transition: none;-webkit-transition-duration: .0s;transition-duration: .0s;}
			.mui-navbar .mui-bar .mui-title {display: inline-block;width: auto;}
			.mui-page-shadow {position: absolute;right: 100%;top: 0;width: 16px;height: 100%;z-index: -1;content: '';}
			.mui-page-shadow {
				background: -webkit-linear-gradient(left, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 10%, rgba(0, 0, 0, .01) 50%, rgba(0, 0, 0, .2) 100%);
				background: linear-gradient(to right, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 10%, rgba(0, 0, 0, .01) 50%, rgba(0, 0, 0, .2) 100%);
			}
			.mui-navbar-inner.mui-transitioning,.mui-navbar-inner .mui-transitioning {-webkit-transition: opacity 300ms ease, -webkit-transform 300ms ease;
				transition: opacity 300ms ease, transform 300ms ease;}
			.mui-page {display: none;}
			.mui-pages .mui-page {display: block;}
			.mui-page .mui-table-view:first-child {margin-top: 15px;}
			.mui-page .mui-table-view:last-child {margin-bottom: 30px;}
			.mui-table-view {margin-top: 20px;}
			.mui-table-view span.mui-pull-right {color: #999;}
			.mui-table-view-divider {background-color: #efeff4;font-size: 14px;}
			.mui-table-view-divider:before,	.mui-table-view-divider:after {	height: 0;}
			.head {height: 40px;}
			#head {	line-height: 40px;}
			.head-img {	width: 40px;height: 40px;}
			.update {font-style: normal;color: #999999;	margin-right: -25px;font-size: 15px;}
			.mui-fullscreen {position: fixed;z-index: 20;background-color: #000;}
			.mui-ios .mui-navbar .mui-bar .mui-title {position: static;	}
			/*问题反馈在setting页面单独的css*/
			.mui-plus.mui-plus-stream .mui-stream-hidden{display: none !important;}
			
			/*问题反馈在setting页面单独的css==end*/
		</style>

	</head>

<body class="mui-fullscreen body_c mui-android mui-android-5 mui-android-5-1 mui-android-5-1-1">
		<!--页面主结构开始-->
		<div id="app" class="mui-views" data-view="1">
			<div class="mui-view">
				<div class="mui-navbar">
				<div class="mui-navbar-inner mui-bar mui-navbar-left">
				<button type="button" class="mui-left mui-action-back mui-btn  mui-btn-link mui-btn-nav mui-pull-left">
					<span class="mui-icon mui-icon-left-nav"></span>
				</button>
				<h1 class="mui-center mui-title">设置</h1>
			</div><div class="mui-navbar-inner mui-bar mui-navbar-center">
				<button type="button" class="mui-left mui-action-back mui-btn  mui-btn-link mui-btn-nav mui-pull-left">
					<span class="mui-icon mui-icon-left-nav"></span>设置
				</button>
				<h1 class="mui-center mui-title">模式</h1>
			</div></div>
				<div class="mui-pages">
				<div id="setting" class="mui-page mui-page-left">
			<!--页面标题栏开始-->
			
			<!--页面标题栏结束-->
			<!--页面主内容区开始-->
			<div class="mui-page-content">
				<div class="mui-scroll-wrapper" data-scroll="2">
					<div class="mui-scroll" style="transform: translate3d(0px, 0px, 0px) translateZ(0px); transition-duration: 0ms;">
						<ul class="mui-table-view mui-table-view-chevron">
							<li class="mui-table-view-cell mui-media">
								<img class="mui-media-object mui-pull-left head-img" id="head-img" src="img/logo.png">
								<div class="mui-media-body">
									账号
									<p class="mui-ellipsis" id="name">undefined</p>
								</div>
							</li>
						</ul>

						<ul class="mui-table-view mui-table-view-chevron">
							<li class="mui-table-view-cell">
								<a href="#notifications" class="mui-navigate-right">模式<i id="checkMode" class="mui-pull-right update">快速模式</i></a>
							</li>
							<li class="mui-table-view-cell">
								<a id="blackSet" class="mui-navigate-right">黑名单设置</a>
							</li>
							<li class="mui-table-view-cell">
								<a class="">联网自动更新黑名单</a>
								<div id="autosynchroniz" class="mui-switch mui-active" data-switch="6">
									<div class="mui-switch-handle"></div>
								</div>
							</li>
							<li class="mui-table-view-cell">
								<a id="licksynchroniz" class="mui-navigate-right">手动同步黑名单</a>
							</li>
						</ul>
						<ul class="mui-table-view mui-table-view-chevron">
							<li class="mui-table-view-cell">
								<a href="#feedback" class="mui-navigate-right">意见反馈</a>
							</li>
							<li class="mui-table-view-cell">
								<a href="#qsytextcontent" class="mui-navigate-right">关于全识鹰 <i id="appVersion" class="mui-pull-right update">V1.0.0</i></a>
							</li>
						</ul>
						<ul class="mui-table-view">
							<li class="mui-table-view-cell" style="text-align: center;">
								<a id="exit">退出登录</a>
							</li>
						</ul>
					</div>
				<div class="mui-scrollbar mui-scrollbar-vertical"><div class="mui-scrollbar-indicator" style="transition-duration: 0ms; display: none; height: 682px; transform: translate3d(0px, 0px, 0px) translateZ(0px);"></div></div></div>
			</div>
			<!--页面主内容区结束-->
		</div><div id="notifications" class="mui-page mui-page-center" style="">
			
			<div class="mui-page-content">
				<div class="mui-scroll-wrapper" data-scroll="4">
					<div class="mui-scroll" style="transform: translate3d(0px, 0px, 0px) translateZ(0px); transition-duration: 0ms;">
						<ul class="mode mui-table-view mui-table-view-radio">
							<li class="mui-table-view-cell" id="quickMode">
								<a class="mui-navigate-right">快速模式</a>
							</li>
							<li class="mui-table-view-cell mui-selected" id="accurateMode">
								<a class="mui-navigate-right mui-active">精准模式</a>
							</li>
						</ul>
					</div>
				<div class="mui-scrollbar mui-scrollbar-vertical"><div class="mui-scrollbar-indicator" style="transition-duration: 0ms; display: none; height: 682px; transform: translate3d(0px, 0px, 0px) translateZ(0px);"></div></div></div>
			</div>
		</div></div>
			</div>
		</div>
		<!--页面主结构结束-->
		<!--单页面开始-->
		
		<!--单页面结束-->

		<div id="qsytextcontent" class="mui-page">
			<div class="mui-navbar-inner mui-bar mui-bar-nav">
				<button type="button" class="mui-left mui-action-back mui-btn  mui-btn-link mui-btn-nav mui-pull-left">
					<span class="mui-icon mui-icon-left-nav"></span>设置
				</button>
				<h1 class="mui-center mui-title">关于全识鹰</h1>
			</div>
			<div class="mui-page-content">
				<div class="mui-scroll-wrapper" data-scroll="3">
					<div class="mui-scroll" style="transform: translate3d(0px, 0px, 0px) translateZ(0px);">
						<div class="mui-card">
							<div class="mui-card-header">全识鹰</div>
							<div class="mui-card-content">
								<div class="mui-card-content-inner">
									全识鹰APP版本V1.0.0
								</div>
							</div>

						</div>
					</div>
				<div class="mui-scrollbar mui-scrollbar-vertical"><div class="mui-scrollbar-indicator" style="transition-duration: 0ms; display: none; height: 8px; transform: translate3d(0px, -8px, 0px) translateZ(0px);"></div></div></div>
			</div>
		</div>

		
		<div id="feedback" class="mui-page feedback">
			<div class="mui-navbar-inner mui-bar mui-bar-nav">
				<button type="button" class="mui-left mui-action-back mui-btn  mui-btn-link mui-btn-nav mui-pull-left">
					<span class="mui-icon mui-icon-left-nav"></span>设置
				</button>
				<h1 class="mui-center mui-title">意见反馈</h1>
			</div>
			<div class="mui-page-content">
				<div class="mui-scroll-wrapper" data-scroll="5">
					<div class="mui-card" style="transform: translate3d(0px, 0px, 0px) translateZ(0px);">
						<p>反馈类型</p>
						<ul class="fb mui-table-view mui-table-view-radio" style="margin: 0;">
							<li class="mui-table-view-cell mui-selected">
								<a class="mui-navigate-right">
									界面错乱
								</a>
							</li>
							<li class="mui-table-view-cell">
								<a class="mui-navigate-right">
									BUG提交
								</a>
							</li>
							<li class="mui-table-view-cell">
								<a class="mui-navigate-right">
									建议
								</a>
							</li>
							<li class="mui-table-view-cell">
								<a class="mui-navigate-right">
									其它
								</a>
							</li>
						</ul>
					</div>
					<div class="mui-card">
						<p>反馈信息</p>
						<div class="row mui-input-row">
							<textarea id="question" class="mui-input-clear question" placeholder="必填,请详细描述你的问题和意见..."></textarea>
						</div>
					</div>
					<div class="mui-card">
						<p>联系方式</p>
						<div class="mui-input-row">
							<input id="contact" type="text" class="mui-input-clear  contact" placeholder="(选填,方便我们联系你 )" data-input-clear="7"><span class="mui-icon mui-icon-clear mui-hidden"></span>
						</div>
					</div>
					<a id="submit">提交</a>
				<div class="mui-scrollbar mui-scrollbar-vertical"><div class="mui-scrollbar-indicator" style="transition-duration: 0ms; display: none; height: 8px; transform: translate3d(0px, -8px, 0px) translateZ(0px);"></div></div></div>
			</div>
		</div>

	


	
	<script src="js/mui.min.js "></script>
	<script src="js/mui.view.js "></script>
	<script>
	(function($, doc) {
			$.init();

			//
			//初始化单页view
			var viewApi = mui('#app').view({
				defaultPage: '#setting'
			});
			//初始化单页的区域滚动
			mui('.mui-scroll-wrapper').scroll();
			
			
			function hasclsssset(arr,obj){
				for(var i=0;i<arr.length;i++){
					if(arr[i]==obj){
						return true;
					}
				}
			}
			
			var list = doc.querySelector('.mode.mui-table-view.mui-table-view-radio');
			list.addEventListener('selected', function(e) {
				var mode = e.detail.el.innerText.substring(0, 4);
				$.toast('您已选择：' + mode);
				
				var index='';
				for( var i=0;i<e.currentTarget.children.length;i++){
					if(hasclsssset(e.currentTarget.children[i].classList,"mui-selected")){
						index=i;
						break
					}
				}
				
				alert(index+1)
			}, false);
			//APP版本
		
			doc.getElementById("submit").addEventListener('tap', function(event) {
				var opinionsVal = doc.getElementById("question").value;
				if(opinionsVal == "") {
					$.toast("反馈信息不能为空");
					return;
				}
				$.ajax({
					data: {
						token: state.token,
						opiniontype: fbSelected + 11,
						opinions: opinionsVal,
						information: doc.getElementById("contact").value
					},
					type: "post",
					url: "http://" + app.host_url + "/usersfeedback/saveFeedback.do",
					dataType: 'json',
					success: function(data) {
						$.toast(data.errmsg);
					}
				});
			}, false);
			//--
		
			var view = viewApi.view;
			//处理view的后退与webview后退
			var oldBack = $.back;
			$.back = function() {
				if(viewApi.canBack()) { //如果view可以后退，则执行view的后退
					viewApi.back();
				} else { //执行webview后退
					oldBack();
				}
			};
		}(mui, document));
	</script>

</html>